<!-- 我的考试-基本信息-组件 -->
<script setup lang='ts'>
  import { reactive, ref, watch, onActivated } from 'vue';
  import { useRoute, useRouter } from 'vue-router'
  import { useStore } from 'vuex';
  import { key } from '@/store/index'
  import type { ElForm } from 'element-plus';
  import Upload from '@/components/upload/index.vue';
  import { getPrevRouteInfo } from '@/common/utils/utils'

  interface basicType {
    coverUrl: {
      url: string;
    }
    title: string;
    brief: string;
  }
  const props = defineProps<{ 
    basic: basicType
  }>()
  const emit = defineEmits<{
    (e: 'update:basic', data?: basicType): void
    (e: 'verify'): void
  }>()

  const route = useRoute();
  const router = useRouter();
  const store = useStore(key);

  const ruleForm = reactive({
    title: '',
    brief: '',
    coverUrl: {
      url: ''
    }
  })

  watch(() => props.basic, (data) => {
    ruleForm.title = data.title;
    ruleForm.brief = data.brief;
    ruleForm.coverUrl.url = data.coverUrl.url;
  })

  const ruleFormRef = ref<InstanceType<typeof ElForm>>()
  const rules = reactive({
    title: [
      {
        required: true,
        message: '请输入考试名称',
        trigger: 'blur',
      },
      {
        min: 2,
        max: 20,
        message: '考试长度2-20字',
        trigger: 'blur',
      },
    ],
    brief: [
      {
        required: true,
        message: '请输入简介',
        trigger: 'blur',
      },
      {
        min: 10,
        message: '请输入至少10个字符',
        trigger: 'blur',
      }
    ],
  })

  const valiteForm = () => {
    ruleFormRef.value?.validate((valid) => {
      if (valid) {
        emit('update:basic', { ...ruleForm })
        emit('verify');
      } else {
        return false
      }
    })
  }

  const goBack = () => {
    const { fullPath, examTags } = getPrevRouteInfo(route.fullPath);
    router.push(fullPath)
    store.commit('setCurrentTags', examTags)
  }

  onActivated(() => {
    // 组件回显时，同步数据
    const basic = props.basic
    ruleForm.title = basic.title;
    ruleForm.brief = basic.brief;
    ruleForm.coverUrl.url = basic.coverUrl.url;
  })

  // 导出表单校验方法，供外部验证
  defineExpose({ basicFormData: ruleForm, goBack, valiteForm })
</script>

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="考试名称：" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="考试封面：">
        <Upload v-model:imageUrl="ruleForm.coverUrl.url"/>
      </el-form-item>
     
      <el-form-item label="考试简介：" prop="brief">
        <el-input 
          v-model="ruleForm.brief" 
          type="textarea" 
          maxlength="200" 
          :show-word-limit="true"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="valiteForm">保存</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped></style>